<template>
		<mt-index-list>
			<mt-index-section v-for="(val, key, index) in cityData" :key="key" :index="key">
				<mt-cell v-for="(item,index) in val"  @click.native="selectCityCardList(item.cityCode)" :data-index="index" :key="item.cityName" :title="item.cityName" :ca="item.cityName | caCityName"></mt-cell>
			</mt-index-section>
		</mt-index-list>
</template>


<script type="text/javascript">
	import Vue from 'vue';
	import Mint from 'mint-ui';
	import 'mint-ui/lib/style.css';

	Vue.use(Mint);

	import { IndexList, IndexSection, Toast } from 'mint-ui';
	Vue.component(IndexList.name, IndexList);
	Vue.component(IndexSection.name, IndexSection);
	 
	//共用方法
	import common from '../../../../assets/js/common.js';
	export default{
		data () {
			return{
					cityIndex:[],
					cityData:{},
					getCityUrl: common.isdev() + '/service/homePage/getCXJCityInfoList/0'
			}
		},
		filters: {
			//打点ca
			caCityName (val) {
				var skuCode = common.getQueryString('skuCode');
				if(val){
					return 'skuCode$'+skuCode + 'P套餐卡_城市选择$' + val;
				}
			}
		},
		mounted() {
			var _this = this;
			var _cityData = {};
      _this.$http.post(this.getCityUrl, {}).then(res => {
				var resBody = res.body;
				if(resBody.errorCode  == 0) {
					var cityList = resBody.result.sort(function (a, b) {
					  return a.cityPhonetic.charCodeAt() - b.cityPhonetic.charCodeAt();
					});
					for (var i = 0; i < cityList.length; i++) {
						var city = cityList[i];
						var cityPhonetic  =  city.cityPhonetic;
						var currentCity = _cityData[cityPhonetic];
						if (currentCity) {
							currentCity.push(city);
						}else  {
							currentCity = [];
							currentCity.push(city);
							_cityData[cityPhonetic] = currentCity;
						}
					}
				}
			  _this.cityData = _cityData;
		  }, (err)=>{
        Toast('网络异常!');
      })
		},
		methods:{
			 //写入cookie
			writeCookieToken(cookieName,token,domain){
				document.cookie = cookieName + "=" + token + ";path=/;domain="+domain;
			},

			//获取域
			getdomain(){
				var h=window.location.host;
				return h.substring(h.substring(0,h.lastIndexOf('.com')).lastIndexOf('.'),h.indexOf('.com')+4);
			},
      
			//选择城市后，写cookie
			selectCityCardList:function(cityId){
				this.writeCookieToken('COOKIE_USER_CARD_CITYID', cityId, this.getdomain());	 	 
                window.location.href= common.isEnv('//h.jia') + '/spah5/#!/cardbuy/' + common.getQueryString('skuCode');			
			}
		}
	}
</script>

<style lang="scss" scope>
  @import '../../../../assets/css/common.scss';
	.mint-indexsection-index{font-size:rem(16)}
	.mint-indexlist-navitem{font-size:rem(14) !important;}
</style>